<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/systemHome' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input
          clearable
          size="small"
          v-model="formInline.name"
          placeholder="输入商品名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          clearable
          size="small"
          v-model="formInline.cstyle"
          placeholder="输入商品类型"
        ></el-input>
      </el-form-item>
      <el-form-item class="right">
        <el-button type="primary" icon="el-icon-plus" @click="handleEdit()"
          >添加</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <Pagination
      v-loading="loading"
      element-loading-text="拼命加载中"
      :headerData="headerData"
      :total="total"
      :tableData="filTableData"
      @CurrentChange="CurrentChange"
      @SizeChange="SizeChange"
    >
      <template v-slot:menu="{ row }">
        <div class="make">
          <el-button size="mini" @click="handleEdit(row)" type="success"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="deleteUser(row)"
            >删除</el-button
          >
        </div>
      </template>
    </Pagination>
    <!-- 编辑界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="30%"
      @click="closeDialog"
    >
      <el-form
        label-width="120px"
        :model="editForm"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item label="商品名称" prop="comName">
          <el-input
            size="small"
            v-model="editForm.comName"
            auto-complete="off"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品分类" prop="comStyle">
          <el-select v-model="editForm.comStyle" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.comStyle"
              :value="item.comStyle"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格" prop="comPrice">
          <el-input-number
            v-model="editForm.comPrice"
            :min="1"
            :max="10000"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="商品数量" prop="comNum">
          <el-input-number
            v-model="editForm.comNum"
            :min="1"
            :max="1000"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitForm(editForm)"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  shopListMock,
  shopList,
  createList,
  deleteList,
} from "@/api/shopManage";
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: "添加",
      options: [
        {
          value: "选项1",
          comStyle: "儿童玩具",
        },
        {
          value: "选项2",
          comStyle: "手机",
        },
        {
          value: "选项3",
          comStyle: "相机",
        },
        {
          value: "选项4",
          comStyle: "平板",
        },
        {
          value: "选项5",
          comStyle: "水果",
        },
        {
          value: "选项6",
          comStyle: "服饰",
        },
        {
          value: "选项7",
          comStyle: "电脑",
        },
      ],
      formInline: {
        name: "",
        cstyle: "",
      },
      editForm: {
        id: "",
        comName: "",
        comStyle: "",
        comPrice: "",
        comNum: "",
      },
      headerData: [
        {
          prop: "comName",
          label: "商品名称",
          width: "150px",
        },
        {
          prop: "comStyle",
          label: "商品类型",
          width: "120px",
        },
        {
          prop: "comPrice",
          label: "商品价格",
          width: "120px",
        },
        {
          prop: "comNum",
          label: "商品数量",
          width: "120px",
        },
        {
          prop: "editTime",
          label: "创建时间",
          width: "220px",
        },
      ],
      tableData: [],
      total: 0,
      pagesize: "5",
      pagenum: "1",
      // rules表单验证
      rules: {
        comName: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        comStyle: [
          { required: true, message: "请输入商品类型", trigger: "click" },
        ],
      },
    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  computed: {
    filTableData() {
      return this.tableData.filter((p) => {
        return (
          p.comName.indexOf(this.formInline.name) !== -1 &&
          p.comStyle.indexOf(this.formInline.cstyle) !== -1
        );
      });
    },
  },
  mounted() {
    let _self = this;
    _self.dataInit();
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取公司列表
    dataInit() {
      let _self = this;
      let data = {
        currentPage: _self.pagenum,
        pageSize: _self.pagesize,
      };
      shopListMock().then((res) => {
        _self.tableData = res.data.list;
        _self.total = res.data.list.length;
        shopList(data).then((ress) => {
          console.log(res.data);
          _self.tableData = ress.data.lists;
          _self.total = ress.data.total;
        });
      });
    },
    CurrentChange(val) {
      let _self = this;
      _self.pagenum = val;
      _self.dataInit();
    },
    SizeChange(val) {
      let _self = this;
      _self.pagesize = val;
      _self.dataInit();
    },
    //显示编辑界面
    handleEdit(row) {
      this.editFormVisible = true;
      if (row != undefined && row != "undefined") {
        this.title = "修改";
        this.editForm.id = row.id;
        this.editForm.comName = row.comName;
        this.editForm.comStyle = row.comStyle;
        this.editForm.comPrice = row.comPrice;
        this.editForm.comNum = row.comNum;
      } else {
        this.title = "添加";
        this.editForm.id = "";
        this.editForm.comName = "";
        this.editForm.comStyle = "";
        this.editForm.comPrice = "";
        this.editForm.comNum = "";
      }
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      console.log(editData);
      createList(editData).then((res) => {
        if (res.code !== 200) {
          return self.$message.error("修改失败！");
        }
        this.editFormVisible = false;
        this.dataInit();
      });
    },
    deleteUser(row) {
      console.log(row);
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteList(row).then((res) => {
          console.log(res);
          if (res.code !== 200) {
            return res.message;
          }
          this.$message.success("删除成功！");
          // 重新渲染列表
          this.dataInit();
        });
      });
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.make {
  width: 200px;
  margin: 0 auto;
  text-align: center;
}
</style>

 
 